<script setup>
import Loading from "../components/Loading.vue";
import useLoadData from "../hooks/useLoadData";
import Card from "../components/Card.vue";
import { getApplyListByPid, updateApply } from "../api/apply";
import { useRoute, useRouter } from "vue-router";
import dateFormat from "../hooks/DataFormat";
//初始化
const route = useRoute();
const router = useRouter();
const { isLoading, isError, data } = useLoadData(
    getApplyListByPid(route.params.pid)
);
const ignoreHandle = item => {
    item.status = 1;
    updateApply(item).then(res => {});
};
const agreeHandle = item => {
    item.status = 2;
    updateApply(item).then(res => {});
};
</script>
<template>
    <Loading
        :is-error="isError"
        :is-loading="isLoading"
        class="manage-container"
    >
        <Card class="member-card" v-for="(item, index) in data" :key="item.uid">
            <router-link :to="'/user/' + item.uid" class="card-left">
                <van-image
                    fit="cover"
                    round
                    width="25"
                    height="25"
                    :src="item.avatar"
                />
                <div class="member-name">{{ item.name }}</div>
                <van-tag
                    v-if="item.is_manager > 0"
                    :color="
                        item.is_manager === 2
                            ? 'var(--main-color)'
                            : 'var(--second-color)'
                    "
                    plain
                    size="mini"
                    class="card-right"
                    >{{ position[item.is_manager] }}</van-tag
                >
                <div
                    class="date"
                    style="font-size: 10px; color: var(--font-gray-color)"
                >
                    {{ dateFormat("YYYY-mm-dd", item.apply_time) }}
                </div>
            </router-link>
            <div v-if="item.status == 0" style="display: flex">
                <van-button
                    round
                    size="small"
                    type="primary"
                    @click="ignoreHandle(item)"
                    >忽略</van-button
                >
                <div style="width: 10px"></div>
                <van-button
                    round
                    size="small"
                    type="success"
                    @click="agreeHandle(item)"
                    >同意</van-button
                >
            </div>
            <div style="color: rgb(0, 163, 14)" v-if="item.status == 2">
                已同意
            </div>
            <div style="color: rgb(156, 156, 156)" v-if="item.status == 1">
                已忽略
            </div>
        </Card>
    </Loading>
</template>

<style scoped>
.manage-container {
    padding: var(--page-padding);
}
.member-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}
.card-left {
    display: flex;
    align-items: center;
}
.member-name {
    margin: 0 10px;
}
</style>
